<template>
  <div class="tableBox">
    <el-row :gutter="20" class="content">
      <el-col :span="4" class="leftBox">
        <div class="attribute" :class="activeLeft==1?'activeLeft':''" @click="cheageLeft(1)">
          <i class="icon el-icon-monitor" />
          <span class="titel">页面属性</span>
        </div>
        <div class="attribute" :class="activeLeft==2?'activeLeft':''" @click="cheageLeft(2)">
          <i class="icon el-icon-film" />
          <span class="titel">标题属性</span>
        </div>
        <div class="attribute" :class="activeLeft==3?'activeLeft':''" @click="cheageLeft(3)">
          <i class="icon el-icon-film" />
          <span class="titel">头题注属性</span>
        </div>
        <div class="attribute" :class="activeLeft==4?'activeLeft':''" @click="cheageLeft(4)">
          <i class="icon el-icon-film" />
          <span class="titel">表格属性</span>
          <i v-if="activeLeft!=4" class="icon1 el-icon-arrow-down" />
          <i v-if="activeLeft==4" class="icon1 el-icon-arrow-up" />
        </div>
        <el-collapse-transition>
          <div v-if="activeLeft==4" class="tableAttribute">
            <div class="item" :class="activeLeftTwo==1?'activeLeftTow':''" @click="cheageLeftTow(1)">表头属性</div>
            <div class="item" :class="activeLeftTwo==2?'activeLeftTow':''" @click="cheageLeftTow(2)">单元格属性</div>
          </div>
        </el-collapse-transition>
        <!--        尾题注属性-->
        <div class="attribute" :class="activeLeft==5?'activeLeft':''" @click="cheageLeft(5)">
          <i class="icon el-icon-film" />
          <span class="titel">尾题注属性</span>
        </div>
      </el-col>
      <el-col
        :span="15"
        class="center"
      >
        <div class="centerBox">
          <div class="toolBox" />
          <div class="pageBox">
            <div class="page" :style="getPageStyle">
              <!--              标题-->
              <div :style="getTitleStyle" @click="cheageLeft(2)">
                {{ getData.page.name }}
              </div>
              <!--              题注-->
              <div v-show="getData.page.topBox.isShow" class="captionBox" :style="getCaptionStyle">
                <div v-for="(item,index) in getData.page.topBox.data" :key="index" class="captionItem" :style="{'font-size': item.style.fontSize+'px', 'color': item.style.color,'font-weight': item.style.fontWeight ,'width':item.style.width*timesNumber+'px','text-align':item.style.align}" @click="changeCaptionText(item,index)">
                  {{ item.text +item.getData }}
                </div>
              </div>
              <!--              表格-->
              <div v-for="(item,index) in getData.table" :key="index" :style="getTableStyle(item)">
                <el-table
                  v-if="item.isShow"
                  :data="item.tableData"
                  :border="item.border"
                  :cell-style="{'text-align':item.cell.algin,'font-weight': item.cell.fontWeight,'color': item.cell.color,'font-size': item.cell.fontSize+'px'}"
                  :header-cell-style="{'text-align':item.header.algin,'font-weight': item.header.fontWeight,'color': item.header.color,'font-size': item.header.fontSize+'px'}"
                >
                  <el-table-column
                    v-for="(item1, index1) in item.tableTitleData"
                    :key="`col_${index1}`"
                    :prop="item1.prop"
                    :label="item1.label"
                    :width="item1.width || ''"
                  />
                </el-table>
              </div>
              <!--              尾题注-->
              <div v-show="getData.page.bottomBox.isShow" class="captionBox" :style="getEndCaptionStyle">
                <div v-for="(item,index) in getData.page.bottomBox.data" :key="index" class="captionItem">
                  {{ item.text }}
                </div>
              </div>

            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="5" class="rightBox">
        <!--        纸张属性配置-->
        <div v-if="activeLeft==1" class="formBox">
          <div class="title">纸张配置</div>
          <el-form ref="form" :model="getData.page" label-width="80px">
            <el-form-item label="纸张类型">
              <el-select v-model="getData.page.size" placeholder="请选择纸张类型">
                <el-option label="A3(297*420)" value="297*420" />
                <el-option label="A4(210*279)" value="210*279" />
                <el-option label="A5(148*210)" value="148*210" />
                <el-option label="B5(182*257)" value="182*257" />
              </el-select>
            </el-form-item>
            <el-form-item label="纸张方向">
              <el-select v-model="getData.page.direction" placeholder="请选择纸张类型">
                <el-option label="水平" value="horizontal" />
                <el-option label="垂直" value="vertical" />
              </el-select>
            </el-form-item>
            <el-form-item label="上边距">
              <el-input v-model="getData.page.style.top" />
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="getData.page.style.bottom" />
            </el-form-item>
            <el-form-item label="左边距">
              <el-input v-model="getData.page.style.left" />
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="getData.page.style.right" />
            </el-form-item>
            <!--            <el-form-item>-->
            <!--              <el-button type="primary" @click="saveForm1">保存</el-button>-->
            <!--            </el-form-item>-->
          </el-form>
        </div>
        <!--        标题属性-->
        <div v-if="activeLeft==2" class="formBox">
          <div class="title">标题属性</div>
          <el-form ref="form" :model="getData.page" label-width="80px">
            <el-form-item label="显示文本">
              <el-input v-model="getData.page.name" />
            </el-form-item>
            <el-form-item label="对齐方式">
              <algin :align="getData.page.titleStyle.algin" @alignChange="titleChangeAlign($event)" />
            </el-form-item>
            <el-form-item label="字体加粗">
              <font-weight
                :font-weight="getData.page.titleStyle.fontWeight"
                @fontWeightChange="titleChangeFontWeight($event)"
              />
            </el-form-item>
            <el-form-item label="字体大小">
              <font-size :font-size="getData.page.titleStyle.fontSize" @fontSizeChange="titleChangeFontsize($event)" />
            </el-form-item>
            <el-form-item label="行高">
              <line-height
                :line-height="getData.page.titleStyle.lineHeight"
                @lineHeightChange="titleChangelineHeight($event)"
              />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker v-model="getData.page.titleStyle.color" />
            </el-form-item>
          </el-form>
        </div>
        <!--        题注属性-->
        <div v-if="activeLeft==3" class="formBox">
          <div class="title">头题注属性</div>
          <el-form ref="form" :model="getData.page.topBox" label-width="80px">
            <el-form-item label="是否显示">
              <el-switch
                v-model="getData.page.topBox.isShow"
              />
            </el-form-item>
            <div v-show="getData.page.topBox.isShow">

              <el-form-item label="上边距">
                <el-input v-model="getData.page.topBox.top" />
              </el-form-item>
              <el-form-item label="下边距">
                <el-input v-model="getData.page.topBox.bottom" />
              </el-form-item>
              <el-form-item label="左边距">
                <el-input v-model="getData.page.topBox.left" />
              </el-form-item>
              <el-form-item label="右边距">
                <el-input v-model="getData.page.topBox.right" />
              </el-form-item>
              <el-form-item label="字体加粗">
                <font-weight
                  :font-weight="getData.page.topBox.fontWeight"
                  @fontWeightChange="captionChangeFontWeight($event)"
                />
              </el-form-item>
              <el-form-item label="字体大小">
                <font-size :font-size="getData.page.topBox.fontSize" @fontSizeChange="captionChangeFontsize($event)" />
              </el-form-item>
              <el-form-item label="字体颜色">
                <el-color-picker v-model="getData.page.topBox.color" />
              </el-form-item>
              <el-form-item label="">
<!--                <el-button type="primary" @click="addCaptionItem">添加</el-button>-->
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!--        表格属性-->
        <div v-if="activeLeft==4&&activeLeftTwo==0" class="formBox">
          <div class="title">表格属性</div>
          <el-form v-for="(item,index) in getData.table" :key="index" ref="form" :model="item" label-width="80px">
            <div v-if="getData.table.length>1">第{{ index + 1 }}个表格属性</div>
            <el-form-item label="显示表格">
              <el-switch
                v-model="item.isShow"
              />
            </el-form-item>
            <div v-if="item.isShow">
              <el-form-item label="显示边框">
                <el-switch
                  v-model="item.border"
                />
              </el-form-item>
              <el-form-item label="上边距">
                <el-input v-model="item.top" />
              </el-form-item>
              <el-form-item label="下边距">
                <el-input v-model="item.bottom" />
              </el-form-item>
              <el-form-item label="左边距">
                <el-input v-model="item.left" />
              </el-form-item>
              <el-form-item label="右边距">
                <el-input v-model="item.right" />
              </el-form-item>
              <!--              <el-form-item label="字体颜色">-->
              <!--                <el-color-picker v-model="item.color" />-->
              <!--              </el-form-item>-->
            </div>
          </el-form>
        </div>
        <!--        表格表头属性-->
        <div v-if="activeLeft==4&&activeLeftTwo==1" class="formBox">
          <div class="title">表格表头属性</div>
          <el-form v-for="(item,index) in getData.table" :key="index" ref="form" :model="item" label-width="80px">
            <div v-if="getData.table.length>1">第{{ index + 1 }}个表格表头属性</div>
            <el-form-item label="对齐方式">
              <algin :align="item.header.algin" @alignChange="tableHeaderChangeAlign($event,item)" />
            </el-form-item>
            <el-form-item label="字体加粗">
              <font-weight
                :font-weight="item.header.fontWeight"
                @fontWeightChange="tableHeaderChangeFontWeight($event,item)"
              />
            </el-form-item>
            <el-form-item label="字体大小">
              <font-size :font-size="item.header.fontSize" @fontSizeChange="tableHeaderChangeFontsize($event,item)" />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker v-model="item.header.color" />
            </el-form-item>
          </el-form>
        </div>
        <!--        表格单元格属性-->
        <div v-if="activeLeft==4&&activeLeftTwo==2" class="formBox">
          <div class="title">表格单元格属性</div>
          <el-form v-for="(item,index) in getData.table" :key="index" ref="form" :model="item" label-width="80px">
            <div v-if="getData.table.length>1">第{{ index + 1 }}个表格单元格属性</div>
            <el-form-item label="对齐方式">
              <algin :align="item.cell.algin" @alignChange="tableCellChangeAlign($event,item)" />
            </el-form-item>
            <el-form-item label="字体加粗">
              <font-weight
                :font-weight="item.cell.fontWeight"
                @fontWeightChange="tableCellChangeFontWeight($event,item)"
              />
            </el-form-item>
            <el-form-item label="字体大小">
              <font-size :font-size="item.cell.fontSize" @fontSizeChange="tableCellChangeFontsize($event,item)" />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker v-model="item.cell.color" />
            </el-form-item>
          </el-form>
        </div>
        <!--        尾题注属性-->
        <div v-if="activeLeft==5" class="formBox">
          <div class="title">尾题注属性</div>
          <el-form ref="form" :model="getData.page.bottomBox" label-width="80px">
            <el-form-item label="是否显示">
              <el-switch
                v-model="getData.page.bottomBox.isShow"
              />
            </el-form-item>
            <div v-show="getData.page.bottomBox.isShow">

              <el-form-item label="上边距">
                <el-input v-model="getData.page.bottomBox.top" />
              </el-form-item>
              <el-form-item label="下边距">
                <el-input v-model="getData.page.bottomBox.bottom" />
              </el-form-item>
              <el-form-item label="左边距">
                <el-input v-model="getData.page.bottomBox.left" />
              </el-form-item>
              <el-form-item label="右边距">
                <el-input v-model="getData.page.bottomBox.right" />
              </el-form-item>
              <el-form-item label="字体加粗">
                <font-weight
                  :font-weight="getData.page.bottomBox.fontWeight"
                  @fontWeightChange="endCaptionChangeFontWeight($event)"
                />
              </el-form-item>
              <el-form-item label="字体大小">
                <font-size :font-size="getData.page.bottomBox.fontSize" @fontSizeChange="endCaptionChangeFontsize($event)" />
              </el-form-item>
              <el-form-item label="字体颜色">
                <el-color-picker v-model="getData.page.bottomBox.color" />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <!--        头题注元素设置-->
        <div v-if="captionChangeShow" class="formBox">
          <div class="title">头题注元素设置</div>
          <el-form ref="form" :model="captionChangeItem" label-width="80px">

            <el-form-item label="宽度">
              <el-input v-model="captionChangeItem.style.width" />
            </el-form-item>
            <el-form-item label="对齐方式">
              <algin :align="captionChangeItem.style.align" @alignChange="captionItemChangeAlign($event,captionChangeItem.style)" />
            </el-form-item>
            <el-form-item label="显示文本">
              <el-input v-model="captionChangeItem.text" />
            </el-form-item>
            <el-form-item label="获取数据">
              <el-input v-model="captionChangeItem.getData" />
            </el-form-item>
            <el-form-item label="字体加粗">
              <font-weight
                :font-weight="captionChangeItem.style.fontWeight"
                @fontWeightChange="captionItemChangeFontWeight($event,captionChangeItem.style)"
              />
            </el-form-item>
            <el-form-item label="字体大小">
              <font-size :font-size="captionChangeItem.style.fontSize" @fontSizeChange="captionItemChangeFontsize($event,captionChangeItem.style)" />
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-color-picker v-model="captionChangeItem.style.color" />
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="deleteCaptionItem(captionChangeItem.index)">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FontSize from '@/views/test/fontSize'
import FontWeight from '@/views/test/fontWeight'
import Algin from '@/views/test/algin'
import lineHeight from '@/views/test/lineHeight'

export default {
  name: 'IndexNew',
  components: {
    FontSize,
    FontWeight,
    Algin,
    lineHeight
  },
  data() {
    return {
      activeLeft: 1, // 左侧激活一级菜单
      activeLeftTwo: 0, // 左侧二级菜单激活
      captionChangeShow: false, // 头题注设置
      captionChangeItem: {}, // 头题注展示数据
      endCaptionChangeShow: false, // 尾题注设置
      timesNumber: 2,
      getData: {
        'page': {
          'name': '测试表格标题', // 标题必须有
          'showLine': false, // 标题下的横线
          'titleStyle': { // 标题样式
            'fontSize': '26',
            'fontWeight': 'bold',
            'color': '#000',
            'algin': 'center',
            'lineHeight': '1.5'
          },
          'topBox': { // 表格上方数据
            'isShow': true, // 是否展示表格上方数据
            'fontSize': '12',
            'fontWeight': 'normal',
            'color': '#000',
            'top': 0,
            'right': 0,
            'bottom': 0,
            'left': 0,
            'data': [// flex布局两端显示
              { 'text': '日期：', 'getData': '2021-12-15 15:20:00', 'style': { 'fontSize': '12', 'fontWeight': 'normal', 'color': '#000000', 'width': '100', 'align': 'left' }},
              { 'text': '检查人：', 'getData': '志愿者1', 'style': { 'fontSize': '12', 'fontWeight': 'normal', 'color': '#000000', 'width': '100', 'align': 'right' }}

            ]
          },
          'bottomBox': {
            'isShow': true, // 是否展示表格下方方数据
            'fontSize': '12',
            'fontWeight': 'normal',
            'color': '#000',
            'top': 10,
            'right': 0,
            'bottom': 0,
            'left': 0,
            'data': [// 表格下方字段

              { 'text': '签发人（签字）', 'style': { 'fontSize': '14px', 'color': '#000000' }},
              { 'text': '复核人（签字)', 'style': { 'fontSize': '14px', 'color': '#000000' }},
              { 'text': '接收人（签字）', 'style': { 'fontSize': '14px', 'color': '#000000' }}

            ]
          },
          'id': 1, // 页面id
          'style': { // 页面样式
            'top': 10,
            'right': 10,
            'bottom': 10,
            'left': 10,
            'fontSize': '14px',
            'color': '#000000'
          },
          'size': '182*257',
          'direction': 'horizontal'
        },
        'table': [
          {
            'title': { // 表格标题
              'show': true,
              'name': '测试表格标题'
            },
            'border': false, // 表格边框
            'isShow': true,
            'top': '5', // 表格距离上方距离
            'bottom': '5', // 表格距离下方数据
            'left': '5',
            'right': '5',
            'color': '#1283b7', // 表格字体颜色
            'algin': 'center', // 表格字段对齐方式 left center right
            'fontSize': '14px', // 表格字体
            'backgroundColor': '#foo', // 表格背景颜色
            'header': { // 表头样式
              'algin': 'center',
              'fontSize': '16',
              'fontWeight': 'bold',
              'color': '#000',
              'data': [ // 表头数据
                {
                  'label': '日期',
                  'prop': 'date',
                  'id': '17e7ab8',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                },
                {
                  'label': '姓名',
                  'prop': 'name',
                  'id': '198c5a0',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                },
                {
                  'label': '地址',
                  'prop': 'address',
                  'id': '95522e',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                },
                {
                  'label': '年龄',
                  'prop': 'age',
                  'id': '56e5538',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                }
              ]
            },
            'cell': { // 单元格样式
              'algin': 'center',
              'fontSize': '12',
              'fontWeight': 'normal',
              'color': '#999999'
            },
            tableTitleData: [
              {
                'label': '日期',
                'prop': 'date',
                'id': '17e7ab8',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              },
              {
                'label': '姓名',
                'prop': 'name',
                'id': '198c5a0',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              },
              {
                'label': '地址',
                'prop': 'address',
                'id': '95522e',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              },
              {
                'label': '年龄',
                'prop': 'age',
                'id': '56e5538',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              }
            ],
            tableData: [
              { date: '2016-05-02 14:25', name: '张三', address: '上海市普陀区金沙江路 1518 弄', age: '18' }
            ]
          },

          {
            'title': { // 表格标题
              'show': true,
              'name': '测试表格标题'
            },
            'border': false, // 表格边框
            'isShow': true,
            'top': '5', // 表格距离上方距离
            'bottom': '5', // 表格距离下方数据
            'left': '5',
            'right': '5',
            'color': '#1283b7', // 表格字体颜色
            'algin': 'center', // 表格字段对齐方式 left center right
            'fontSize': '14px', // 表格字体
            'backgroundColor': '#foo', // 表格背景颜色
            'header': { // 表头样式
              'algin': 'center',
              'fontSize': '16',
              'fontWeight': 'bold',
              'color': '#000',
              'data': [ // 表头数据
                {
                  'label': '日期',
                  'prop': 'date',
                  'id': '17e7ab8',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                },
                {
                  'label': '姓名',
                  'prop': 'name',
                  'id': '198c5a0',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                },
                {
                  'label': '地址',
                  'prop': 'address',
                  'id': '95522e',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                },
                {
                  'label': '年龄',
                  'prop': 'age',
                  'id': '56e5538',
                  'width': '',
                  'align': 'center',
                  'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
                }
              ]
            },
            'cell': { // 单元格样式
              'algin': 'center',
              'fontSize': '12',
              'fontWeight': 'normal',
              'color': '#999999'
            },
            tableTitleData: [
              {
                'label': '日期',
                'prop': 'date',
                'id': '17e7ab8',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              },
              {
                'label': '姓名',
                'prop': 'name',
                'id': '198c5a0',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              },
              {
                'label': '地址',
                'prop': 'address',
                'id': '95522e',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              },
              {
                'label': '年龄',
                'prop': 'age',
                'id': '56e5538',
                'width': '',
                'align': 'center',
                'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }
              }
            ],
            tableData: [
              { date: '2016-05-02 14:25', name: '张三', address: '上海市普陀区金沙江路 1518 弄', age: '18' }
            ]
          }
        ]
      }
    }
  },
  computed: {
    // 纸张设置样式
    getPageStyle() {
      const size = this.getData.page.size
      let width = size.split('*')[0] * this.timesNumber + 'px'
      let height = size.split('*')[1] * this.timesNumber + 'px'
      // debugger
      if (this.getData.page.direction === 'horizontal') {
        width = size.split('*')[1] * this.timesNumber + 'px'
        height = size.split('*')[0] * this.timesNumber + 'px'
      }
      // debugger
      const style = {
        'width': width,
        'height': height,
        'padding-top': this.getData.page.style.top * this.timesNumber + 'px',
        'padding-bottom': this.getData.page.style.bottom * this.timesNumber + 'px',
        'padding-left': this.getData.page.style.left * this.timesNumber + 'px',
        'padding-right': this.getData.page.style.right * this.timesNumber + 'px'
      }
      return style
    },
    // 页面标题设置
    getTitleStyle() {
      const titleStyle = this.getData.page.titleStyle
      const style = {
        'font-size': titleStyle.fontSize + 'px',
        'font-weight': titleStyle.fontWeight,
        'color': titleStyle.color,
        'text-align': titleStyle.algin,
        'line-height': titleStyle.fontSize * this.getData.page.titleStyle.lineHeight + 'px',
        'cursor': 'pointer'
      }
      // debugger
      return style
    },
    //  题注设置
    getCaptionStyle() {
      const topBox = this.getData.page.topBox
      const style = {
        'font-size': topBox.fontSize + 'px',
        'font-weight': topBox.fontWeight,
        'color': topBox.color,
        'padding-top': topBox.top * this.timesNumber + 'px',
        'padding-bottom': topBox.bottom * this.timesNumber + 'px',
        'padding-left': topBox.left * this.timesNumber + 'px',
        'padding-right': topBox.right * this.timesNumber + 'px'
      }
      // debugger
      return style
    },
    // 尾题注设置
    getEndCaptionStyle() {
      const bottomBox = this.getData.page.bottomBox
      const style = {
        'font-size': bottomBox.fontSize + 'px',
        'font-weight': bottomBox.fontWeight,
        'color': bottomBox.color,
        'padding-top': bottomBox.top * this.timesNumber + 'px',
        'padding-bottom': bottomBox.bottom * this.timesNumber + 'px',
        'padding-left': bottomBox.left * this.timesNumber + 'px',
        'padding-right': bottomBox.right * this.timesNumber + 'px'
      }
      // debugger
      return style
    }
    // ,
    // getTableHeaderStyle({row, rowIndex}) {
    //   console.log(row)
    //   // console.log(rowIndex)
    //   const style = {
    //   }
    //   return style
    // }

  },
  methods: {
    // 题注删除
    deleteCaptionItem(index) {
      this.getData.page.topBox.data.splice(index, 1)
      this.captionChangeShow = false
    },
    // 题注点击文字对齐方式
    captionItemChangeAlign(align, item) {
      // debugger
      item.align = align
    },
    // 题注点击字体大小
    captionItemChangeFontsize(fontSize, item) {
      // debugger
      item.fontSize = fontSize
    },
    // 题注点击字体粗细
    captionItemChangeFontWeight(fontWeight, item) {
      item.fontWeight = fontWeight
    },
    // 题注点击
    changeCaptionText(item, index) {
      this.activeLeft = 0
      this.activeLeftTwo = 0
      this.captionChangeItem = item
      this.captionChangeItem.index = index
      this.captionChangeShow = true
      this.endCaptionChangeShow = false
    },
    // 改变尾题注字体大小
    endCaptionChangeFontsize(fontSize) {
      this.getData.page.bottomBox.fontSize = fontSize
    },
    // 改变尾题注字体粗细
    endCaptionChangeFontWeight(fontWeight) {
      this.getData.page.bottomBox.fontWeight = fontWeight
    },
    // 单元格字体大小
    tableCellChangeFontsize(fontSize, item) {
      item.cell.fontSize = fontSize
    },
    // 表格单元格字体搓洗
    tableCellChangeFontWeight(fontWeight, item) {
      // debugger
      item.cell.fontWeight = fontWeight
    },
    // 单元格对齐方式
    tableCellChangeAlign(align, item) {
      // debugger
      item.cell.algin = align
    },
    // 表格表头字体大小设置
    tableHeaderChangeFontsize(fontSize, item) {
      item.header.fontSize = fontSize
    },
    // 表格表头字体搓洗
    tableHeaderChangeFontWeight(fontWeight, item) {
      // debugger
      item.header.fontWeight = fontWeight
    },
    // 表格表头对齐方式设置
    tableHeaderChangeAlign(align, item) {
      // debugger
      item.header.algin = align
    },
    //  表格样式设置
    getTableStyle(item) {
      const style = {
        'margin-top': item.top * this.timesNumber + 'px',
        'margin-bottom': item.bottom * this.timesNumber + 'px',
        'margin-left': item.left * this.timesNumber + 'px',
        'margin-right': item.right * this.timesNumber + 'px'
      }
      // debugger
      return style
    },
    // 改变题注字体大小
    captionChangeFontsize(fontSize) {
      this.getData.page.topBox.fontSize = fontSize
    },
    // 改变题注字体粗细
    captionChangeFontWeight(fontWeight) {
      this.getData.page.topBox.fontWeight = fontWeight
    },
    // 改变标题对齐方式
    titleChangeAlign(align) {
      this.getData.page.titleStyle.algin = align
    },
    // 改变标题字体粗细
    titleChangeFontWeight(fontWeight) {
      this.getData.page.titleStyle.fontWeight = fontWeight
    },
    // 标题改变字体大小
    titleChangeFontsize(fontSize) {
      this.getData.page.titleStyle.fontSize = fontSize
    },
    // 标题改变行高
    titleChangelineHeight(lineHeight) {
      this.getData.page.titleStyle.lineHeight = lineHeight
    },

    // 左侧状态改变
    cheageLeft(num) {
      this.activeLeft = num
      this.activeLeftTwo = 0
      this.captionChangeShow = false
      this.endCaptionChangeShow = false
    },
    cheageLeftTow(num) {
      this.activeLeftTwo = num
      // this.activeLeft = 0
      this.captionChangeShow = false
      this.endCaptionChangeShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.tableBox {
  width: 100%;
  height: 100%;
  position: absolute;

  .content {
    width: 100%;
    height: 100%;

    .leftBox {
      //background: #0a76a4;
      height: 100%;

      cursor: pointer;
      border-right: 1px solid #999999;

      .attribute {
        font-size: 14px;
        color: #222;
        //margin: 10px;
        padding: 8px 0;
        padding-left: 15px;
        display: flex;
        align-items: center;
        position: relative;
        //display: flex;
        //justify-content: space-between;
        &:first-child {
          margin-top: 15px;
        }

        .icon {
          color: #666;
          font-size: 18px;
        }

        .titel {
          margin-left: 5px;
        }

        .icon1 {
          position: absolute;
          right: 10px;

        }
      }

      .activeLeft {
        background: #0a76a4;
        color: #ffffff;

        .icon {
          color: #ffffff;
        }
      }

      .tableAttribute {
        .item {
          padding: 8px 0;
          padding-left: 30px;
          font-size: 14px;
          color: #222;
        }

        .activeLeftTow {
          background: #6eaecb;
          color: #ffffff;
        }

      }

    }

    .center {
      height: 100%;

      .centerBox {
        width: 100%;
        height: 100%;
        overflow: auto;
        //display: flex;
        //justify-content: center;
        //flex-wrap: wrap;
        position: relative;

        .toolBox {
          width: 100%;
          height: 40px;
          background: #0a76a4;
          margin-bottom: 10px;

        }

        .pageBox {
          width: 100%;
          //height: 710px;
          //text-align: center;

          margin-bottom: 20px;
          overflow: auto;

          .page {
            margin: 10px auto;
            background: #cfe3ea;

            .captionBox {
              display: flex;
              justify-content: space-between;

              .captionItem {
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .rightBox {
      height: 100%;
      border-left: 1px solid #999999;
      padding-top: 20px;
      overflow: auto;

      .formBox {
        .title {
          font-size: 18px;
          font-weight: 500;
          //::v-deep .el-form{
          //  ::v-deep .el-form-item{
          //    margin-bottom: 10px;
          //  }
          //}

        }

      }
    }
  }
}
</style>
